<template>
    <div class="headdiv">
        <div class="hdmain_left">
            <div class="hd_left">
                <span>AI爱招聘</span>
            </div>
            <div class="hd_center" v-show="showAction">
                <!-- <div class="hdc_div" :class="{select_div:active=='home'}" @click="setActive('/user/index')">
                <span>简历</span>
            </div>
            <div class="hdc_div" :class="{select_div:active=='jianli'}" @click="setActive('/user/post')">
                <span>岗位</span>
            </div>
            <div class="hdc_div" :class="{select_div:active=='sousuo'}"  @click="setActive('/user/havepost')">
                <span>沟通</span>
            </div> -->
                <!-- <div class="hdc_div" :class="{select_div:active=='chat'}" @click="setActive('/user/activepost')">
                <span>邀约的岗位</span>
            </div> -->

            </div>
        </div>

        <div class="hd_right" v-show="showAction">

            <div class="hd_list">
                <div class="hdl_div" :class="{ selecthdl: fist_active == 0 }">
                    <span>分发推荐</span>
                </div>
                <div class="hdl_div" :class="{ selecthdl: fist_active == 1 }">
                    <span>求职</span>
                </div>
            </div>
            <el-dropdown v-show="showAction">
                <div class="hd_list">
                    <div class="hd_logo">
                        <img v-if="userInfo.img"
                            :src="'https://www.aizhaopin.pro/prod-api/sys/common/static/' + userInfo.img">
                        <img v-else :src="userImg">
                    </div>
                    <div class="hd_name">
                        <span>{{ $root.userInfo.user.name }}</span>
                    </div>
                    <div class="hd_icon">
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                </div>

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-office-building" @click.native="toChangeUser">切换</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button" @click.native="loginOut">退出</el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>
        </div>
        
        <div class="muban_dialog"  v-show="showSelectUser">

        </div>


        <div class="box_slide_verify" v-show="showSelectUser" style="width: 400px;height: 350px;">
            <div class="bsv_head" style="border-bottom: 0px;">
                <span>请选择登录的角色</span>
                <i class="el-icon-circle-close" @click="showSelectUser = false"></i>
            </div>
            <div class="rolelist">
                <template v-for="item in roleList">
                    <div class="role_div" @click="selectRole(item)"
                        :class="{ select_role_div: item.id == selectForm.id }">
                        <div class="rd_left">
                            <div class="rd_img" v-if="item.logo">
                                <img v-if="item.logo"
                                    :src="'https://www.aizhaopin.pro/prod-api/sys/common/static/' + item.logo">

                            </div>
                            <div class="rd_img" v-else>
                                <img :src="userImg">
                            </div>
                            <div class="rd_name">
                                <span>{{ item.name }}</span>
                                <el-tag type="" effect="dark" size="small" v-if="item.type == 1"
                                    style="margin-left: 5px;">
                                    {{ item.typeDescription }}
                                </el-tag>
                                <el-tag type="warning" effect="dark" size="small" v-if="item.type == 2"
                                    style="margin-left: 5px;">
                                    {{ item.typeDescription }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="rd_right">
                            <i class="el-icon-success" v-if="item.id == selectForm.id"></i>
                        </div>

                    </div>
                </template>


            </div>
            <div class="role_bottom">
                <div class="roled_btn" @click="sureLogin">
                    <span>确认</span>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
import homeapi from '@/api/api.js'
import userImg from '@/assets/imgs/ai_logo.jpg'
import until from '@/api/until'
export default {
    name: 'postfooter',
    data() {
        return {
            userInfo: {},
            userImg: userImg,
            fist_active: 1,
            showSelectUser: false,
            roleList: [],
            selectForm: {},
       

        }
    },
    props: {
        active: String,
        showAction: Boolean
    },
    mounted() {
        this.getUserInfo();
        this.getLoginUserList();
    },
    methods: {
        async sureLogin() {
             let form=this.selectForm
                let data=await homeapi.confirmRole(form);
                if(data.code==200){

                    until.setCookie("token",data.result)
                    if(form.type==1){
                        this.$router.replace("/company/index")
                    }
             
                }
        },
        selectRole(item){
            this.selectForm={
                id:item.id,
                type:item.type
            }
        },
        //获取企业信息
        async getUserInfo() {
            let data = await homeapi.getUserinfo();
            if (data.code == 200) {
                this.userInfo = data.result.user;
               this.$root.userInfo=data.result
            }
        },
        setActive(type) {
            this.$router.push(type)
        },
        loginOut() {
            console.log("....")
            until.setCookie("token", "")
            this.$router.push("/login/loginnew")

        },
        toChangeUser() {
            // this.getLoginUserList();
            if(this.roleList.length==1){
                this.$message.error("暂无其他角色");
            }
            if(this.roleList.length==2){
                this.roleList.map(res=>{
                    if(res.id!=this.userInfo.id){
                        this.selectRole(res)
                        this.sureLogin()
                    }
                })
            }
            else{
                 this.showSelectUser=true;
            }
           
        },
        //获取登录的账号
        async getLoginUserList() {
            let data = await homeapi.getLoginUserList();
            if (data.code == 200) {
                if (data.result && data.result.length > 0) {
                    const roleList = data.result
                    this.roleList=roleList;
                    // if (roleList.length == 0) {
                    //     this.$message.error("请先注册")
                    // }
                    // else {
                    //     if (roleList.length == 1) {
                    //         this.selectRole(roleList[0])
                    //         this.sureLogin();
                    //         this.roleList=data.result
                    //     }
                    //     else {
                    //         this.roleList = roleList
                    //         this.showSelectUser = true;
                    //     }

                    // }
                }
                else {
                    this.$message.error("请先注册")
                }

            }
        },
    }
}
</script>
<style scoped>
.headdiv {
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hd_left {
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 24px;
    color: #F5792A;
    line-height: 31px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: bold;
    width: 400px;
}

.hd_right {
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hd_logo {
    width: 26px;
    height: 26px;
    background: #D8D8D8;
    border-radius: 50%;
}

.hd_logo img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.hd_name {
    font-size: 14px;
    color: #333333;
    line-height: 16px;
    margin-left: 8px;
}

.hd_icon .iconfont {
    font-size: 14px;
    color: #999999;
    margin-left: 8px;
}

.hd_center {
    display: flex;
    align-items: center;
    justify-content: center;

}

.hdc_div {
    font-size: 16px;
    color: #333333;
    margin-left: 32px;
    cursor: pointer;
}

.hdc_div:first-child {
    margin-left: 0px;
}

.select_div {
    color: #F5792A;
    font-weight: bold;
}

.hdmain_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.hd_list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 15px;
}

.hdl_div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333333;
    width: 90px;
    cursor: pointer;
}

.hd_list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.selecthdl {
    height: 35px;
    border-radius: 4px;
    background: #F5792A;
    color: #ffffff;
}


.box_slide_verify {
    position: fixed;
    width: 450px;
    height: 360px;
    background: #FFFFFF;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9999;
    margin-top: 280px;
    border-radius: 4px;
    box-sizing: border-box;
}

.bsv_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    font-size: 20px;
    font-weight: bold;
    color: #666666;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 30px;

    box-sizing: border-box;
}

.bsv_head i {
    font-size: 28px;
    color: #999999;
    cursor: pointer;
}

.checkbox {
    margin-top: 40px;
}

.boxsv_div {
    width: 390px;
    position: relative;
    margin-left: 30px;
    margin-top: 15px;
}

.verify {
    height: 60px;
    border: 1px solid #52ccba;
    background-color: #d2f4ef;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #52ccba;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 16px;
    font-weight: bold;
}

.isError {
    border: 1px solid #cc5252;
    background-color: #f4d2d2;
    color: #cc5252;
}

.muban_dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.rolelist {
    width: 100%;
    display: inline-block;
    padding: 0 15px;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 200px;
    overflow-y: auto;
}

.role_div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    box-sizing: border-box;
    margin-top: 15px;
    border: 1px solid #e6e6e6;
    cursor: pointer;
}

.role_div:hover {
    border: 1px solid #FC7B24;
}

.rd_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.rd_img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.rd_img img {
    width: 100%;
    height: 100%;
}

.rd_name {
    flex: 1;
    margin-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 25px;
}

.rd_right i {
    color: #FC7B24;
    font-size: 24px;
}

.select_role_div {
    border: 1px solid #FC7B24;
}

.role_bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30px;
    box-sizing: border-box;
}

.roled_btn {
    width: 100px;
    height: 45px;
    background: #FC7B24;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}
</style>